<template>
  <view>
    <view @click="getDraft(draft.tuanId)" v-for="(draft, index) in drafts" :key="index" class="draft-item">
      <text class="draft-title">{{ draft.tuanTitle.slice(0, 16) }}...</text>
      <view class="draft-content">{{ draft.tuanDetail.slice(0, 18) }}...</view>
      <image class="delete-button" src="/static/my-icons/delete.png" @click.stop="deleteDraft(index, draft.tuanId)"></image>
    </view>
    <view v-if="drafts.length === 0" class="no-drafts-message">
      空空如也~
    </view>
  </view>
</template>

<script>
export default {
  props: {
    farmerId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      drafts: []
    };
  },
  onLoad() {
  
  },
  onShow() { // 添加 onShow 生命周期钩子
    //获取草稿信息列表
    this.fetchDrafts();
  },
  methods: {
    //获取草稿信息列表
    fetchDrafts() {
      const userId = uni.getStorageSync('userId')
      console.log("--------userId:", userId);
      uni.$http
        .get(`/tuan/getDrafts?userId=${userId}&listTuanStatus=${this.listTuanStatus}`)
        .then((res) => {
          console.log("查看草稿", res.data);
          // 解析服务器返回的 JSON 数据
          const responseData = res.data;
          if (responseData.code === 200) {
            this.drafts = responseData.data;
          }
        })
        .catch((err) => {
          console.error('获取草稿失败:', err);
        });
    },
    getDraft(tuanId) {
      console.log("Navigating to draft_info with tuanId:", tuanId);
      uni.navigateTo({
        url: `/subpkg/draft_info/draft_info?tuanId=${tuanId}`
      });
    },
    deleteDraft(index, tuanId) {
      // 弹出确认对话框
      uni.showModal({
        title: '',
        content: '是否删除此组团信息？',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确认按钮
            uni.$http
              .delete(`/tuan/deleteDraft?tuanId=${tuanId}`)
              .then((res) => {
                console.log("删除草稿", res.data);
                const responseData = res.data;
                if (responseData.code === 200) {
                  this.drafts.splice(index, 1);
                  uni.showToast({
                    title: "删除成功",
                    icon: "success",
                    duration: 2000
                  });
                } else {
                  uni.showToast({
                    title: "删除失败",
                    icon: "none",
                    duration: 2000
                  });
                }
              })
              .catch((err) => {
                console.error('删除草稿失败:', err);
                uni.showToast({
                  title: "删除失败",
                  icon: "none",
                  duration: 2000
                });
              });
          } else if (res.cancel) {
            // 用户点击了取消按钮
            console.log('用户取消了删除操作');
          }
        }
      });
    }
  }
}
</script>

<style>
.draft-item {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  position: relative;
}

.draft-title {
  font-size: 16px;
  font-weight: bold;
  display: block; 
}

.draft-content {
  font-size: 14px;
  color: #666;
  display: block; 
}

.delete-button {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  width: 20px; /* 添加: 设置图片宽度 */
  height: 20px; /* 添加: 设置图片高度 */
}

.no-drafts-message {
  text-align: center;
  margin-top: 20vh;
  color: #999;
}
</style>